const colors = require('tailwindcss/colors')

module.exports = {
  content: [],
  darkMode: 'class',
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    // 响应式屏幕大小设定
    screens: {
      'sm': {'min': '640px', 'max': '767px'},
      'md': {'min': '768px', 'max': '1023px'},
      'lg': {'min': '1024px', 'max': '1279px'},
      'xl': {'min': '1280px', 'max': '1535px'},
      '2xl': {'min': '1536px'}
    },
    // 颜色
    colors: {
      // transparent: 'transparent',
      // current: 'currentColor',
      gray: colors.coolGray,
      red: colors.red,
      rose: colors.rose,
      yellow: colors.yellow,
      green: colors.green,
      blue: colors.blue,
      lightBlue: colors.lightBlue,
      fuchsia: colors.fuchsia,
      pink: colors.pink,
      purple: colors.purple,
      indigo: colors.indigo,
      // 自定义颜色 bg-blue-light
      mine: {
        light: '#85d7ff',
        DEFAULT: '#1fb6ff',
        dark: '#009eeb',
      }
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '1': '8px',
        '2': '12px',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    },
  },
  variants: {
    backgroundColor: ['active']
  },
  variantOrder: [
    'first',
    'last',
    'odd',
    'even',
    'visited',
    'checked',
    'empty',
    'read-only',
    'group-hover',
    'group-focus',
    'focus-within',
    'hover',
    'focus',
    'focus-visible',
    'active',
    'disabled',
  ],
  plugins: [],
}


